<!DOCTYPE html>
<html>

<head>
  <title>AP CSA Student Client</title>
    <link rel="stylesheet" href="codemirror-5.64.0/lib/codemirror.css">
    <script src="codemirror-5.64.0/lib/codemirror.js"></script>
    <script src="codemirror-5.64.0/mode/clike/clike.js"></script>
    <style>
      
      .CodeMirror {
        background-color: #efefef;
        height: 600px;
    }
    .code {
      width: 640px;
            display: inline-block;
            margin: 10px;
    }
    </style>
</head>

<body>
  <div>
    <div class="code">
      <div>Show teacher code do not edit</div>
      <textarea class="code" id="code"></textarea>
    </div>

    <div class="code"><form id="form" action="">
       <label for="studentName">请选择你的名字：</label>
       <select id="studentName">
        <option value="baiyiyi">请选择你的名字</option>
        <option value="baiyiyi">白一一</option>
        <option value="chenhaoyang">陈浩洋</option>
        <option value="zhouzihan">周子涵</option>
        <option value="like">李可</option>
        <option value="lvyilin">吕宜林</option>
        <option value="linyulei">林玉蕾</option>
        
      </select>
    </form>
      <textarea class="code" id="code-stu"></textarea>
    </div>
  </div>


  <script src="/socket.io/socket.io.js"></script>

  <script>
    var socket = io();

    var teacherCode = CodeMirror.fromTextArea(document.getElementById("code"), {
      lineNumbers: true,width:"200px",readOnly: 'nocursor',
      mode: "text/x-java" //实现Java代码高亮
  });

  var studentCode = CodeMirror.fromTextArea(document.getElementById("code-stu"), {
    lineNumbers: true,width:"200px",
    mode: "text/x-java" //实现Java代码高亮
});

    var form = document.getElementById('form');
    // var code = document.getElementById('code');
    // var studentCode = document.getElementById('code-stu');

    var currName = "";
    var stuName = document.getElementById("studentName");

    stuName.addEventListener("input", function (e) {
      e.preventDefault();
      console.log(stuName.value);
      currName = stuName.value;
    })

 

    studentCode.on("update", function(event){
      console.log("ss");
      if(currName == ""){
        alert("Please select your name!")
      }
      socket.emit('chat message', {"msg": studentCode.getDoc().getValue(), "name": currName});
  })

    socket.on('teacher code', function (msg) {
     console.log(msg)
     // code.value = msg;
     teacherCode.getDoc().setValue(msg)

    });

    


  </script>
</body>

</html>
